

//自定义主题样式
const autoThemes={
    blue:{
        "--header-bg-color":"#B3C0D1",
    },
    orange:{
        "--header-bg-color":"#e3941f",
    },
    pink:{
        "--header-bg-color":"#ec3a81",
    }
}


//定义并导出切换主题 缓存主题的方法
export default (themeName)=>{
    //1.1获取index.html文件中第二个 link标签对象
    let link = document.getElementsByTagName('link')[1];
    //1.2重写href主题文件路径
    link.href = `theme/${themeName}/theme/index.css`

    //1.3获取自定义主题样式数据
    let autoThemeData = autoThemes[themeName]
    // 1.4如何修改html中的全局css变量的值
    let body = document.getElementsByTagName('body')[0]
    // 1.5循环修改定义的css变量的值 setProperty:修改css变量的值
    for(let key in autoThemeData){
        body.style.setProperty(key,autoThemeData[key])
    }

    //1.6将本次主题缓存到本地 以防以后使用
    localStorage.setItem('themeName',themeName)
}